<template>
	<uni-popup ref="popup" :safe-area="false" type="bottom" class="popup-box" :is-mask-click="false" @maskClick="toggle(false)">
		<view class="popup-head flex-r ac">
			<text></text>
			<text class="text-bold">全部留言</text>
			<image class="close-icon" src="@/public/images/public/qxan.png" mode="aspectFit" @tap.stop="toggle(false)"></image>
		</view>
		<view class="popup-view flex-c bottom-ios">
			<!-- 评论列表 -->
			<scroll-view :scroll-y="true" class="scroll-Y" :scroll-into-view="scrollId" :scroll-with-animation="true" @scrolltolower="loadMore()">
				<view class="comment-list flex-c">
					<view class="comment-list-body flex-c">
						<template v-for="(comment, commentIndex) in comments" v-if="comment.isShow == 1">
						<view class="comment-list-item flex-c" :key="commentIndex" :id="'comment_'+commentIndex" @tap.stop="setReplyData(comment, comment.id, commentIndex)">
							<view class="comment-head flex-r ac">
								<view class="flex-r ac">
									<lazy-image class="avatar" :src="comment.userAvatar+'?imageView2/1/w/100/h/100/q/50'" :type="comment.userType" fit="cover"></lazy-image>
								</view>
								<text>{{comment.userName || '用户'}}</text>
							</view>
							<view class="comment-body flex-c">
								<view class="comment-content">
									<text>{{comment.content}}</text>
								</view>
								<view class="comment-time flex-r ac jsb">
									<uni-dateformat class="text-info" :date="comment.createTime" format="yyyy.MM.dd hh:mm"></uni-dateformat>
									<view class="right flex-r ac" @tap.stop="likeAdd(comment)">
										<image :src="require('@/public/images/public/lydz_'+(comment.likeFlag === 1 ? 'yd' : 'wd')+'.png')" mode="aspectFit"></image>
										<text class="text-info color-grey">{{comment.likeNum || 0}}</text>
									</view>
								</view>
								<view class="comment-reply flex-c" v-if="comment.replyNum || comment.replyList">
									<template v-if="comment.replyList">
										<template v-for="(reply, index) in comment.replyList">
											<view class="comment-list-item flex-c" v-if="reply.isShow == 1" :key="index" :id="'comment_'+commentIndex+'_'+index" @tap.stop="setReplyData(reply, comment.id, commentIndex, index)">
												<view class="comment-head flex-r ac">
													<view class="flex-r ac" @tap.stop="$CHS.goExpertHome(reply.userId, reply.userType, type > 1 ? type - 1 : type)">
														<lazy-image class="avatar" :src="reply.userAvatar+'?imageView2/1/w/100/h/100/q/50'" :type="reply.userType" fit="cover"></lazy-image>
													</view>
													<text>{{reply.userName || '用户'}}</text>
												</view>
												<view class="comment-body flex-c">
													<view class="comment-content">
														<text class="relpay-name" v-if="reply.replyUserId != comment.userId">回复{{reply.replyUserName}}：</text>
														<text>{{reply.content}}</text>
													</view>
													<view class="comment-time flex-r ac jsb">
														<uni-dateformat class="text-info" :date="reply.createTime" format="yyyy.MM.dd hh:mm"></uni-dateformat>
														<view class="right flex-r ac" @tap.stop="likeAdd(reply)">
															<image :src="require('@/public/images/public/lydz_'+(reply.likeFlag === 1 ? 'yd' : 'wd')+'.png')" mode="aspectFit"></image>
															<text class="text-info color-grey">{{reply.likeNum || 0}}</text>
														</view>
													</view>
												</view>
											</view>
										</template>
									</template>
									<view class="comment-reply-more flex-r ac mt20" v-if="comment.replyNum && comment.replyEnd !== true" @tap.stop="getReplyComment(comment)">
										<text class="text-info color-blue">展开查看{{ comment.replyPageNo ? '更多' : comment.replyNum + '条' }}回复</text>
										<image src="@/public/images/bar/ljt_x.png" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
						</template>
					</view>
					<view class="list-end flex-r mt20 pb20" v-if="commentsEnd && comments[0]">
						<text>已经到底啦～</text>
					</view>
				</view>
			</scroll-view>
			<!-- 评论输入框 -->
			<CommentInput 
				:popup.sync="inputPopup"
				:type="type" 
				:replyData="replyData" 
				:commentType="commentType" 
				:articleId="msgId" 
				:expertId="expertId" 
				@success="successComment" 
				@close="resetData"></CommentInput>
		</view>
	</uni-popup>
</template>

<script>
	import CommentInput from "./ch-commentinput.vue"
	/**
	 * CommentPopup 评论列表弹窗
	 * @description 方案详情、讨论贴等评论输入框
	 * @property {Boolean} show 评论列表弹窗状态
	 * @property {String} type = [1|3|7|8|99] 
	 *  @value 1 专家料
	 *  @value 3 晒单
	 *  @value 7 话题贴
	 *  @value 8 投票贴
	 *  @value 99 用户料
	 * @property {String} barId 球吧ID
	 * @property {String} msgId 方案或讨论贴ID
	 * @property {String} expertId 方案所属专家ID
	 * @property {Boolean} refresh 刷新评论列表
	 * @example <CommentPopup type="1" :msgId="articleId" :expertId="expertId"></CommentPopup>
	 */
	export default {
		name: "CommentPopup",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: 1
			},
			barId: {
				type: [String, Number],
				default: ''
			},
			msgId: {
				type: [String, Number],
				default: ''
			},
			expertId: {
				type: [String, Number],
				default: ''
			},
			refresh: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				scrollId: null, //滚动位置
				parentIndex: null, //评论索引
				
				pageNo: 1, //列表页数
				comments: [], //评论列表数据
				commentsEnd: false, //评价加载完毕
				commentType: 1, //评论类型
				replyData: {}, //回复对象
				
				inputPopup: false //评论框弹起状态
			};
		},
		components: {
			CommentInput
		},
		watch: {
			refresh(newValue) {//刷新评论列表
				if(newValue){
					this.pageNo = 1
					this.commentsEnd = false
					this.getCommentList()
				}
			},
			show(newValue, oldValue) {//显示列表
				if(newValue){
					this.pageNo = 1
					this.commentsEnd = false
					this.getCommentList()
					this.$refs.popup.open()
				}else{
					this.$refs.popup.close()
					this.inputPopup = false
				}
			}
		},
		methods: {
			/**
			 * @description 设置回复对象数据
			 * @param {object} comment 被回复的评论对象
			 * @param {string} parentId 外层评论ID
			 * @param {number} parentIndex 外层评论索引
			 * @param {number} replyIndex 嵌套回复时的内层评论索引
			 */
			setReplyData(comment, parentId, parentIndex, replyIndex = null) {
				console.log(comment);
				this.replyData = {//回复对象数据
					parentId,
					replyCommentId: comment.id,
					replyUserAvatar: comment.userAvatar,
					replyUserId: comment.userId,
					replyUserName: comment.userName
				}
				this.commentType = 2 //评论类型
				this.parentIndex = parentIndex
				if(typeof replyIndex == 'number'){//滚动到评论位置
					this.scrollId = 'comment_' + parentIndex + '_' + replyIndex
				}else{
					this.scrollId = 'comment_' + parentIndex
				}
				this.$nextTick(()=>{
					this.scrollId = null
				})
			},
			/**
			 * @description 评论成功回调
			 * @param {object} data 评论成功后返回的评论对象
			 */
			successComment(data = {}) {
				if(data){
					if(this.commentType == 2){//回复
						if(this.parentIndex !== null){//判断是否存在外层索引
							let comment = this.comments[this.parentIndex]
							if(data.id){
								if(!comment.replyList){
									comment.replyList = []
								}
								comment.replyList.unshift(data) //添加到回复列表
								this.scrollId = 'comment_' + this.parentIndex //列表滚动到新评论位置
								this.$nextTick(()=>{
									this.scrollId = null
								})
							}else{
								//刷新回复列表
								this.$set(comment, 'replyEnd', false)
								this.$set(comment, 'replyPageNo', 1)
								this.getReplyComment(comment)
							}
						}
					}else{//评论
						if(data.id){
							//数据有效则添加到评论列表
							this.comments.unshift(data)
						}else{
							//刷新列表
							this.pageNo = 1
							this.getCommentList()
						}
					}
				}
				//重置评论参数
				this.resetData()
			},
			/**
			 * @description 评论点赞
			 * @param {object} comment 被点赞的评论对象
			 */
			likeAdd(comment) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(comment.likeFlag !== 1){
					this.$http.post({
						url: '/api/forum/like/add',
						data: {
							commonId: comment.id,
							forumId: this.barId,
							status: comment.likeFlag ? 0 : 1,
							type: 3
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$ShowToast({text: '点赞成功', type: 1})
							this.$set(comment, 'likeFlag', 1)
							if(comment.likeNum){
								comment.likeNum += 1
							}else{
								this.$set(comment, 'likeNum', 1)
								this.$forceUpdate()
							}
						}else{
							this.$ShowToast({text: data.message || '点赞失败，请稍后重试', type: 2})
						}
					})
				}
				
			},
			//查看更多
			loadMore(){
				if(!this.commentsEnd){
					this.getCommentList()
				}
			},
			//查询评论列表
			getCommentList() {
				this.$http.get({
					url: '/api/chtyUserComment/pageComment',
					data: {
						msgId: this.msgId,
						type: this.type,
						pageNo: this.pageNo,
						pageSize: 15,
						forumId: this.barId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.comments = data.result.records
						}else{
							this.comments.push(...data.result.records)
						}
						this.commentsEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			/**
			 * @description 查询评论的回复列表
			 * @param {object} comment 外层评论对象
			 */
			getReplyComment(comment) {
				if(comment.replyEnd !== true){
					this.$http.get({
						url: '/api/chtyUserComment/pageComment',
						data: {
							msgId: this.msgId,
							type: this.type,
							pageNo: comment.replyPageNo ? comment.replyPageNo : 1,
							pageSize: 5,
							parentId: comment.id,
							forumId: this.barId
						}
					}).then(data => {
						console.log(data);
						if(data.success && data.result && data.result.total){
							if(data.result.current == 1){
								this.$set(comment, 'replyList', data.result.records)
							}else{
								comment.replyList.push(...data.result.records)
							}
							let isEnd = data.result.current >= data.result.pages
							this.$set(comment, 'replyEnd', isEnd)
							this.$set(comment, 'replyPageNo', data.result.current + 1)
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			//打开关闭评论弹窗
			toggle(status){
				console.log(status);
				if(status){
					this.$refs.popup.open()
				}else{
					if(this.inputPopup){
						this.inputPopup = false
					}else{
						this.$emit("update:show", false);
					}
				}
			},
			//重置评论参数
			resetData() {
				this.replyData = {}
				this.commentType = 1
				this.parentIndex = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-box{
		z-index: 998;
		/deep/ .bottom{
			max-width: $max-width;
			margin: $pc-margin;
		}
		.popup-head{
			height: 96rpx;
			padding: 0 20rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			border-bottom: 1rpx solid #EDEDED;
			.text-bold{
				flex: 2;
				text-align: center;
				font-size: 36rpx;
			}
			.close-icon{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.popup-view{
			.scroll-Y{
				height: calc(var(--safe-height) - 96rpx - 96rpx - 88rpx);
			}
		}
		.bottom-ios{
			background-color: #fff;
		}
	}
	.comment-list{
		.comment-list-body{
			padding: 0 20rpx;
			background-color: #FFFFFF;
			&.radius{
				border-radius: 10rpx;
			}
			.comment-list-item{
				padding: 20rpx 0 0;
				.comment-head{
					.avatar{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
					}
					text{
						margin-left: 20rpx;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
				.comment-body{
					padding-left: 84rpx;
					.comment-content{
						text-align: justify;
						font-size: 24rpx;
						color: #666666;
						line-height: 36rpx;
						word-break: break-all;
						.relpay-name{
							color: #1F4799;
						}
					}
					.comment-time{
						margin-top: 18rpx;
						color: #B3B3B3;
						image{
							margin-right: 9rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
					.comment-reply{
						.comment-list-item{
							padding-top: 0;
							margin-top: 20rpx;
						}
						.comment-list-item:first-child{
							margin-top: 20rpx;
						}
						.comment-list-item:last-child{
							padding-bottom: 0;
						}
						.comment-reply-more{
							image{
								margin-left: 10rpx;
								width: 16rpx;
								height: 16rpx;
							}
						}
					}
					
				}
			}
			.comment-list-item:first-child{
				padding-top: 30rpx;
			}
			.comment-list-item:last-child{
				padding-bottom: 20rpx;
			}
			.comment-list-more{
				border-top: 1rpx solid #ededed;
				margin-top: 30rpx;
				height: 80rpx;
				box-sizing: border-box;
				.right-icon{
					margin-left: 9rpx;
					width: 24rpx;
					height: 26rpx;
				}
			}
		}
	}
</style>